<template>
<div class="app">
	<div class="row">
		<li v-for="(item,index) in cat" :key="index">
			<div class="left">
				<mt-switch v-model="value[index]"></mt-switch>
			</div>
			<div class="right">
				<img :src="item.thumb_path" alt="" />
				<h4 v-text="item.title"></h4>
				<p><font>￥{{item.sell_price}}</font>   <num  :number="item.num" :ids= "item.id" v-on:num="getCount"></num>    <a @click="del(item.id)">删除</a></p>
			</div>
		</li>
	</div>
		<div class="total">
			<div class="left">
				<h5>总计(不含运费)</h5>
				<span>已经勾选商品{{selectcount}}件,总价￥{{settment}}元</span>
			</div>
			<div class="right">
				<mt-button class="settm" type="danger" size="normal">去结算</mt-button>
			</div>
		</div>
 {{value}}

</div>
  
 
</template>

<script>
	import    num  from "../puclicson/num.vue"
	import  {getItem,delItem,setItem,couterItem}  from   "../../kits/catshop.js"
	import  commit  from "../../kits/commit.js"
	
	
	export default {
	
	  data () {
	    return {
	      value: [],
	      catnum:[],
	      cat:[],
	      settment:0
	    }
	  },
	  created(){
	  	  	this.getcat()	
	  },
	  computed: {
	   	selectcount(){
	   		var temp = 0
	   		this.settment = 0
	   		this.value.forEach((item,index)=>{
	   			if(item){
	   				temp++
	   				this.settment += this.cat[index].sell_price * this.cat[index].num
	   			}
	   		})
	   		return temp
	   	}
	   	
	   	
	  },
	  methods:{
	  
	  	getcat(){
	  		let temp = getItem()  //[{"goodsid":"88","num":1},{"goodsid":"91","num":0},{"goodsid":"91","num":2}]
	  	  		let ids = []
	  	  		temp.forEach(item=>{
	  	  			if(ids.indexOf(item["goodsid"]) == -1 ){
	  	  				ids.push(item["goodsid"])//["78","97"]
	  	  			}
	  	  		})
	  	  		ids=ids.join(",");
	  	  	let catsnum={}; //{88: 2, 91: 2, 94: 1}
	  	  	temp.forEach(item=>{
	  	  		if(catsnum[item.goodsid]){
	  	  			catsnum[item.goodsid] += item.num
	  	  		 return	
	  	  		}
	  	  		catsnum[item.goodsid] = item.num
	  	  	})
              ids = ids || 0
			let url = commit.api + "/api/goods/getshopcarlist/"+ids;
	  		this.$http.get(url).then(res=>{
	  			  this.cat=res.body.message
	  			  
	  			    this.cat.forEach((item,index)=>{
	  			    	item.num = catsnum[item.id]
	  	   				this.value[index]= false // 获取数据之后 初始化  value的值
	  	 			})
	  			
	  		})
	  	},
	  	getCount(obj){
	  		
	  		if(obj.type =="add"){
	  			
	  			setItem({"goodsid":obj.id,"num":1})
//	  			console.log(this.cat)
				for (let i = this.cat.length-1 ; i >=0 ; i--) {
					 if (this.cat[i].id == obj.id){
					 	 this.cat[i].num++	
							break
				     	}
				}
	
	  		}else{
	  			
	  			couterItem(obj.id)
//	  			console.log(this.cat)
	  			for (let i = this.cat.length-1 ; i >=0 ; i --) {
					 if (this.cat[i].id == obj.id){
					 	 this.cat[i].num--	
							break
				     	}
				}
	  					  			
	  		}
	  		
	  		
	  		
	  	},
	  	del(index){
//	  		  this.cat = this.cat.filter(v=>v.id != index )  c存在bug  删除的时候 value 没法删除
	  			
	  			
	  		let thisindex = this.cat.findIndex(c=>c.id == index);
			if(thisindex >=0) {
				this.cat.splice(thisindex, 1);
				this.value.splice(thisindex, 1);
			}
	  		  
	  	   delItem(index)
	  	 
	  	}
	  },
	  components:{
	  	num
	  	
	  	
	  }
	}
</script>

<style>
.row {
	padding: 5px;
	overflow: hidden;
}
.row>li {
	height: 100px;
	list-style: none;
}
.row .left{
	float: left;
	width: 60px;
}
.mint-switch{
	margin-top: 20px;
}
.row .right{
	float: right;
	width: 250px;	
}
.row .right img{
	float: left;
	width: 70px;
	height: 70px;	
}
.row .right h4{
	font-size: 14px;
}
.row .right .tmp{
	display: inline-block;
}
.row .right .tmp ul{
	padding-left:5px;
}

.row .right p font{
	color: #FF0000;
}


</style>
